<template>
  <div>
    <TopNav title="栏目管理" />
    <div class="activeList">
      <h2>点击删除以下频道</h2>
      <div class="list">
        <div
          @click="deactive(index)"
          class="item"
          v-for="(item, index) in activeList"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="deactiveList">
      <h2>点击添加以下频道</h2>
      <div class="list">
        <div
          @click="active(index)"
          class="item"
          v-for="(item, index) in deactiveList"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "../components/TopNav";
export default {
  components: {
    TopNav
  },
  data() {
    return {
      activeList: [],
      deactiveList: []
    };
  },
  watch: {
    activeList() {
      localStorage.setItem("activeList", JSON.stringify(this.activeList));
    },
    deactiveList() {
      localStorage.setItem("deactiveList", JSON.stringify(this.deactiveList));
    }
  },
  created() {
    if (localStorage.getItem("activeList")) {
      this.activeList = JSON.parse(localStorage.getItem("activeList"));
      if (localStorage.getItem("deactiveList")) {
        this.deactiveList = JSON.parse(localStorage.getItem("deactiveList"));
      }
    } else {
        //这里是发送请求，但是不一定需要
      this.$axios({
        url: "/category"
      }).then(res => {
        this.activeList = res.data.data;
      });
    }
  },
  methods: {
    deactive(index) {
      //这里要禁用一个分类，
      //先放入禁用列表，再从激活列表中删除即可
      this.deactiveList.push(this.activeList[index]);
      this.activeList.splice(index, 1);
    },
    active(index) {
      this.activeList.push(this.deactiveList[index]);
      this.deactiveList.splice(index, 1);
    }
  }
};
</script>

<style lang="less" scoped>
h2 {
  padding-left: 10/360 * 100vw;
  font-weight: 400;
  font-size: 14/360 * 100vw;
  color: #888;
}
.list {
  display: flex;
  flex-wrap: wrap;
  .item {
    font-size: 16/360 * 100vw;
    padding: 6/360 * 100vw 14/360 * 100vw;
    border: 1px solid #888;
    margin: 12/360 * 100vw;
  }
}
</style>